import React, { useEffect, useState } from 'react';
/*
  学习目标：HOOKS候子函数======》useEffect
  步骤：
     1. 
     2. 
     3. 
*/
export default function App() {
  const [tcount, settCount] = useState(0);
  // 1，第二个参数为：[]
  // 等价于：componentDidMount,代表挂载后，值会执行一次
  //   useEffect(() => {
  //     console.log('tcount  ----->  ', tcount);
  //     document.title = tcount;
  //   }, []);

  // 2,第二个参数为：[依赖项]
  //等价于：componentDidMount和componDidUpdate连哥哥钩子函数二合一
  // 类似于vue中watch，开启了深度监听
  //   useEffect(() => {
  //     console.log('tcount  ----->  ', tcount);
  //     document.title = tcount;
  //   }, [tcount]);

  // 3,不携带第二个参数，表示监听所有的状态，不能这么写，会造成页面卡顿

  return (
    <>
      <h1>tcount-----{tcount}</h1>
      <button onClick={() => settCount(tcount + 1)}>点我加1</button>
      {/* <button onClick={settCount(tcount + 1)}>点我加1</button> */}
    </>
  );
}
